<template>
    <div>
        <head-nav></head-nav>
        <div class="center">
            <div class="cent-search">
                <div class="cent-search-left">
                    <div class="cent-search-div">
                        <span>公告内容</span>
                        <input type="text" v-model="searchTitle">
                    </div>
                    <div class="cent-search-div">
                        <span>公告时间</span>
                        <input type="text" v-model="searchTime">
                    </div>
                    <div class="cent-search-div">
                        <span>公告作者</span>
                        <input type="text" v-model="searchWhiter">
                    </div>
                    <div class="cent-search-div">
                        <span>公告类型</span>
                        <input type="text" v-model="searchType">
                    </div>
                </div>
                <div class="cent-search-right">
                    <div>查询 <br>公告</div>
                </div>
            </div>
            <div class="a111">
                <div class="table">
                <tr>
                    <th>公告题目</th>
                    <th>公告作者</th>
                    <th>发布时间</th>
                    <th>公告类型</th>
                </tr>
                <tr v-for="(item,index) in items" :key="index" @click="goNoticeMore">
                    <td>{{item.title}}</td>
                    <td>{{item.writer}}</td>
                    <td>{{item.time}}</td>
                    <td>{{item.type}}</td>
                </tr>
            </div>
            </div>
        </div>
        <foot-nav></foot-nav>
    </div>
</template>

<script>
    import HeadNav from "@/components/HeadNav";
    import FootNav from "@/components/FootNav";
    export default {
        name: "noticelist",
        components: {FootNav, HeadNav},
        data(){
            return{
                noticeList:[
                    {title:'10月30日惠城区开展全员核酸检测的公告1',time:'2022-10-20 06:00:00',writer:'a',type:'核酸检测1'},
                    {title:'10月30日惠城区开展全员核酸检测的公告2',time:'2022-10-30 06:00:00',writer:'b',type:'核酸检测2'},
                    {title:'10月30日惠城区开展全员核酸检测的公告3',time:'2022-10-31 06:00:00',writer:'c',type:'核酸检测3'},
                    {title:'10月30日惠城区开展全员核酸检测的公告4',time:'2022-10-1 06:00:00',writer:'d',type:'核酸检测4'},
                    {title:'10月30日惠城区开展全员核酸检测的公告5',time:'2022-10-5 06:00:00',writer:'e',type:'核酸检测5'},
                    {title:'10月30日惠城区开展全员核酸检测的公告6',time:'2022-10-9 06:00:00',writer:'f',type:'核酸检测6'},
                    {title:'10月30日惠城区开展全员核酸检测的公告7',time:'2022-10-6 06:00:00',writer:'g',type:'核酸检测7'}
                ],
                searchTitle:'',
                searchTime:'',
                searchWhiter:'',
                searchType:''
            }
        },

        computed:{
            items(){
                return this.noticeList.filter((item)=>{
                    return item.title.match(this.searchTitle) && item.time.match(this.searchTime) && item.writer.match(this.searchWhiter) && item.type.match(this.searchType)
                })
            },
        },
        methods:{
            goNoticeMore(){
                this.$router.push({path:'/noticemore/:id'})
            }
        }
    }
</script>

<style scoped>
    .center{
        text-align: center;
    }
    .cent-search{
        background: #cceefb;
        border: 1px solid #1f95ab;
        display: flex;
        width: 1000px;
        margin: 20px auto;
        text-align: center;
        align-items:center;
    }
    .cent-search-left{
        width: 800px;
    }
    .cent-search-div{
        display: inline-block;
        margin: 10px 8px;
        padding: 10px;
        border: 1px solid lightgray;
        border-radius: 5px;
        background: white;
    }
    .cent-search-div span{
        margin-right: 15px;
    }
    .cent-search-div input{
        height: 30px;
        width: 250px;
        border: none;
    }
    .cent-search-right{
        margin-left: 50px;
    }
    .cent-search-right div{
        background: #3e8fba;
        color: white;
        font-size: 25px;
        height: 100px;
        line-height: 50px;
        width: 100px;
    }
    .a111{
        width: 1000px;
        margin: 0 auto;
        background: url("../../assets/img/logo1.png") no-repeat;
    }
    .table{
        width: 1000px;
        min-height: 500px;
        margin: 20px auto;
        background: rgba(255,255,255,0.8);
    }
    .table tr>th{
        width: 250px;
        height: 50px;
        line-height: 50px;
        font-size: 20px;
        color: #1f95ab;
        border-bottom: 2px solid #1f95ab;
    }
    .table td{
        border-bottom: 2px dashed lightgray;
        padding: 10px;
    }
</style>